<template>
    <div class="searchDialogBody">
        <div class="title padding-top padding-bottom">
            <slot name="title">{{ props.title }}：</slot>
        </div>
        <el-card
            class="box-card margin-top"
            v-for="item in props.lists"
            shadow="never"
            @click.stop="handleCard(item)"
            :class="item.isActive ? 'selectedActive' : ''"
        >
            <div class="content">
                <span>
                    <el-icon :size="20">
                        <component :is="props.icon"></component>
                    </el-icon>
                </span>
                <span class="margin-left center">
                    <span>{{ item.title }}</span>
                    <span>{{ item.illustrate }}</span>
                </span>
                <span class="right" v-if="props.type === 'clock' || props.type === 'star'">
                    <el-button link @click.stop="handleCollectSearch(item)" v-if="props.type !== 'star'">
                        <el-icon :size="20"><Star /></el-icon>
                    </el-button>
                    <el-button link @click.stop="handleDel(item)">
                        <el-icon :size="20"><Close /></el-icon>
                    </el-button>
                </span>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { Star, Close } from '@element-plus/icons-vue'
import type { ISearchListData } from '@/components/search/types'
import { headerSearchStore } from '@/store'
import { onMounted, watch } from 'vue'
import { data } from './headerSearch'
const store = headerSearchStore()
const props = withDefaults(
    defineProps<{
        lists?: ISearchListData[] | undefined
        title?: string
        type?: 'folder' | 'clock' | 'star'
        icon?: string
    }>(),
    {
        lists: undefined,
        type: 'folder',
        title: '搜索结果',
        icon: 'FolderOpened',
    },
)

// 点击选项
const handleCard = (row: ISearchListData) => {
    // 通过收藏跳转不再展示历史记录
    if (props.type !== 'star') {
        store.setHistorySearch(row)
    }
    // 点击过后进行跳转并关闭Dialog
    data.isShowDialog = false
    // 这个只是测试
    // window.open(row.url)
}
// 收藏
const handleCollectSearch = (row: ISearchListData) => {
    store.setCollectSearch(row)
    delData(row)
    data.allStoreList = [...store.data.historySearch, ...store.data.collectSearch]
}
//  删除
const handleDel = (row: ISearchListData) => {
    delData(row)
}

const delData = (row: ISearchListData) => {
    if (props.type === 'star') {
        store.data.collectSearch = store.data.collectSearch.filter((item) => item != row)
    }

    if (props.type === 'clock') {
        store.data.historySearch = store.data.historySearch.filter((item) => item != row)
    }
}
// 监听状态机历史记录的变化
watch(
    () => store.data.historySearch.length,
    () => {
        if (store.data.historySearch.length > 5) {
            store.data.historySearch.pop()
        }
    },
)
// 监听状态机收藏记录的变化
watch(
    () => store.data.collectSearch.length,
    () => {
        if (store.data.collectSearch.length > 8) {
            store.data.collectSearch.pop()
        }
    },
)

const emits = defineEmits(['arrowUp', 'arrowDown'])

onMounted(() => {
    keydown()
})
const keydown = () => {
    document.onkeydown = (e) => {
        // 向上执行操作
        if (e.key === 'ArrowUp' && data.searchLists === undefined) {
            e.preventDefault()
            if (data.activeIdx === 0) {
                data.activeIdx = data.allStoreList.length - 1
            } else {
                data.activeIdx--
            }
            loopData(data.allStoreList, data.activeIdx)
            scrollArrowUp(data.allStoreList)
        } else if (e.key === 'ArrowUp' && data.searchLists !== undefined) {
            e.preventDefault()

            if (data.activeSearchIdx === 0) {
                data.activeSearchIdx = data.searchLists.length - 1
            } else {
                data.activeSearchIdx--
            }

            loopData(data.searchLists, data.activeSearchIdx)
            scrollArrowUp(data.searchLists)
        }
        // 向下执行操作
        if (e.key === 'ArrowDown' && data.searchLists === undefined) {
            e.preventDefault()
            if (data.activeIdx === data.allStoreList.length - 1) {
                data.activeIdx = 0
            } else {
                data.activeIdx++
            }
            loopData(data.allStoreList, data.activeIdx)
            scrollArrowDown(data.allStoreList)
        } else if (e.key === 'ArrowDown' && data.searchLists !== undefined) {
            e.preventDefault()

            if (data.activeSearchIdx === data.searchLists.length - 1) {
                data.activeSearchIdx = 0
            } else {
                data.activeSearchIdx++
            }
            loopData(data.searchLists, data.activeSearchIdx)
            scrollArrowDown(data.searchLists)
        }

        // 执行回车事件
        if (e.key === 'Enter' && data.searchLists === undefined) {
            e.preventDefault()
            data.allStoreList.forEach((element, index) => {
                if (data.activeIdx === index) {
                    handleCard(element)
                }
            })
        }

        if (e.key === 'Enter' && data.searchLists !== undefined) {
            e.preventDefault()
            data.searchLists.forEach((element, index) => {
                if (data.activeSearchIdx === index) {
                    handleCard(element)
                }
            })
        }
    }
}

const loopData = (loopList: any[], idx: number) => {
    loopList.forEach((element, index) => {
        if (idx === index) {
            element.isActive = true
        } else {
            element.isActive = false
        }
    })
}
// 向上滚动
const scrollArrowUp = (arr: any[]) => {
    const upDOM: any = document.querySelectorAll('.box-card')
    arr.forEach((element, index) => {
        if (element.isActive === true) {
            emits('arrowUp', upDOM[index].offsetTop)
        }
    })
}

// 向下滚动
const scrollArrowDown = (arr: any[]) => {
    const upDOM: any = document.querySelectorAll('.box-card')
    arr.forEach((element, index) => {
        if (element.isActive === true) {
            emits('arrowDown', upDOM[index].offsetTop)
        }
    })
}
</script>

<style scoped lang="scss">
.searchDialogBody {
    .title {
        color: var(--docsearch-card-title);
    }
    .box-card {
        cursor: pointer;
        color: #898484;
        &:hover {
            background: var(--docsearch-card-hover-bgColor);
            color: var(--docsearch-card-hover-color);
        }

        .content {
            display: flex;
            align-items: center;
            span {
                span {
                    &:last-child {
                        margin-top: 0.2rem;
                        font-size: 0.2rem;
                    }
                }
            }
            .center {
                display: flex;
                flex-direction: column;
            }
            .right {
                margin-left: auto;
            }
        }
    }
}
:deep(.el-card__body) {
    padding: 0.5rem;
}

.selectedActive {
    background: var(--docsearch-card-bgColor);
    color: var(--docsearch-card-color) !important;
    .content {
        .right {
            .el-button {
                color: var(--docsearch-card-color) !important;
            }
        }
    }
}
</style>
